<template>
  <view class="contact-buttons">
    <view class="contact-btn merchant" @click="callMerchant" v-if="merchantPhone">
      <text class="btn-icon">🏪</text>
      <text class="btn-text">联系商家</text>
    </view>
    <view class="contact-btn rider" @click="callRider" v-if="riderPhone">
      <text class="btn-icon">🛵</text>
      <text class="btn-text">联系配送员</text>
    </view>
  </view>
</template>

<script setup>
/**
 * 组件属性定义
 */
const props = defineProps({
  /**
   * 商家电话
   */
  merchantPhone: {
    type: String,
    default: ''
  },
  /**
   * 配送员电话
   */
  riderPhone: {
    type: String,
    default: ''
  }
})

/**
 * 拨打商家电话
 */
const callMerchant = () => {
  if (!props.merchantPhone) return

  uni.showModal({
    title: '联系商家',
    content: `是否拨打商家电话：${props.merchantPhone}？`,
    success: (res) => {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: props.merchantPhone,
          fail: (err) => {
            uni.showToast({
              title: '拨打电话失败',
              icon: 'none'
            })
          }
        })
      }
    }
  })
}

/**
 * 拨打配送员电话
 */
const callRider = () => {
  if (!props.riderPhone) return

  uni.showModal({
    title: '联系配送员',
    content: `是否拨打配送员电话：${props.riderPhone}？`,
    success: (res) => {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: props.riderPhone,
          fail: (err) => {
            uni.showToast({
              title: '拨打电话失败',
              icon: 'none'
            })
          }
        })
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.contact-buttons {
  display: flex;
  margin-top: 20rpx;

  .contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16rpx 30rpx;
    border-radius: 40rpx;
    margin-right: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

    &:active {
      transform: scale(0.98);
    }

    .btn-icon {
      margin-right: 10rpx;
      font-size: 32rpx;
    }

    .btn-text {
      font-size: 28rpx;
    }

    &.merchant {
      background: #fff;
      color: #ff6b6b;
      border: 1rpx solid #ff6b6b;
    }

    &.rider {
      background: #fff;
      color: #3399ff;
      border: 1rpx solid #3399ff;
    }
  }
}
</style>
